<script setup lang="ts">
import {ref, computed, defineEmits} from "vue";
// 如果使用的是按需加载，则需要单独引入所需的组件
import { ElButton, ElRow } from "element-plus";

// 定义所有的标签及其对应值
const labels = ["场景", "动画", "数据", "状态"];
const selectedBox = ref(0);
// 定义要发出的事件
const emit = defineEmits(['selectComponent']);
// 接收父组件传递的宽度和高度，并设置默认值
const props = defineProps({
  width: {
    type: String,
    default: "100%",
  },
  height: {
    type: String,
    default: "auto",
  },
});

// 计算容器样式
const containerStyle = computed(() => ({
  width: props.width,
  height: props.height,
}));

// 选择盒子的方法
const selectBox = (index) => {
  // selectedBox.value = `Box ${labels[index].toUpperCase()}`;
  selectedBox.value = index;
  emit('selectComponent',index);
};
import { ElButton, ElRow } from "element-plus";
</script>

<template>
  <div class="header">
    <el-button
      v-for="(label, index) in labels"
      :key="index"
      @click="selectBox(index)"
    >
      <span class="span">{{ label }}</span>
    </el-button>
<!--    <SceneComponent v-if="selectedBox == 0"></SceneComponent>-->
<!--    <DataComponent v-if="selectedBox.value === 2"></DataComponent>-->
<!--    <StateComponent v-if="selectedBox.value === 3"></StateComponent>-->
<!--    <AnimationComponent v-if="selectedBox.value === 1"></AnimationComponent>-->
  </div>

  <!-- <el-row type="flex" justify="space-around" align="middle" class="header">

  </el-row> -->
</template>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
}

.header {
  flex-shrink: 0;
  /* padding: 10px; */
  /* background-color: #f0f0f0; */
}
/* .header .el-button{
  width: 80px;
} */

.content {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  /* background-color: #303648; */
}

.box {
  display: flex;
  align-items: center;
  justify-content: center;
  /* background-color: #435486; */
  width: 100%;
  height: 100%;
  color: white; /* 确保文字颜色与背景对比明显 */
}

.box img {
  max-width: 100%;
  height: auto;
  border: 1px solid #ccc;
  margin-bottom: 1vh;
}
.header .span{
  font-size: 0.8vw;
}
:deep .el-button {
  /* padding: 0; */
  width: 4vw !important;
}
:deep .el-button {
  margin-left: 0.4vw !important;
  height: 3.4vh;
  margin-top: 0.75vh;
  background: #5882d6;
  border: none;
  color: #ffffff;
}
</style>
